<script>
import useAddProject from 'hooks/useAddProject';
export default {
  props: ['collapseCtrl'],
  setup(props, { emit }) {
    const { project, alternatives, handleAddProject, handleRestoreDefault } = useAddProject(emit);
    let disabledDate = (time) => {
      return time.getTime() < 1609430400000;
    };
    return {
      alternatives,
      project,
      handleAddProject,
      handleRestoreDefault,
      disabledDate,
    };
  },
};
</script>

<template>
  <el-collapse v-model="collapseCtrl">
    <el-collapse-item title="新计划" name="3">
      <el-form label-width="80px" label-position="left">
        <el-form-item label="预设">
          <el-select v-model="alternatives.chosen" placeholder="请选择" style="width: 100%">
            <el-option v-for="p in alternatives.presets" :key="p" :label="p" :value="p"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称">
          <el-input v-model="project.name" placeholder="例：考研单词21天" maxlength="100"></el-input>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker
            v-model="project.startAt"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled-date="disabledDate"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="词表名">
          <el-input v-model="project.listName" placeholder="Unit" maxlength="100"></el-input> </el-form-item
        ><el-form-item label="总数">
          <el-input-number v-model.number="project.total" :min="1"> </el-input-number>
        </el-form-item>
        <el-form-item label="每天学习">
          <el-input-number v-model.number="project.daily" :min="1"> </el-input-number>
        </el-form-item>

        <el-form-item label="复习间隔">
          <el-checkbox-group v-model="project.gap">
            <el-checkbox label="1" disabled></el-checkbox>
            <el-checkbox v-for="(n, i) in 7" :key="i" :label="(n + 1).toString()"></el-checkbox>
            <el-checkbox label="15"></el-checkbox>
            <el-checkbox label="21"></el-checkbox>
            <el-checkbox label="26"></el-checkbox>
          </el-checkbox-group>
          <el-button type="text" @click="handleRestoreDefault">恢复默认</el-button>
        </el-form-item>
        <el-form-item>
          <el-space wrap size="large"
            ><el-checkbox v-model="project.reverse">是否逆序</el-checkbox>
            <el-button type="success" plain @click="handleAddProject">添加</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
</template>

<style></style>
